<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import {updateCurrentLoginPassword} from "@/api/basal.js"
import {ResultEnums} from "@/enums/ResultStatusEnums.js";
import Alert from "@/components/debris/Alert.vue"
import router from "@/router/index.js";
import {Storage} from "@/utils/Storage.ts";
const {proxy} = getCurrentInstance();
const password = reactive({oldPassword: "",newPassword: "",affirmPassword: ""});
const errors = reactive({})
const alertInfo = reactive({alert:false,level:2,title:'',content:''})
async function confirmUpdatePassword(e){
  e.preventDefault();
  await resetErrors()
  const oldPassword = password.oldPassword;
  if(!oldPassword) {
    errors['oldPassword'] = '请输入原始密码';
    return;
  }
  const newPassword = password.newPassword;
  if(!newPassword) {
    errors['newPassword'] = '请输入新密码';
    return;
  }
  const affirmPassword = password.affirmPassword;
  if(!affirmPassword) {
    errors['affirmPassword'] = '请再次输入新密码';
    return;
  }

  if(newPassword !== affirmPassword) {
    errors['newPassword'] = '与再次输入密码不一致,请修改';
    errors['affirmPassword'] = '与新输入密码不一致,请修改';
    return;
  }
  if(oldPassword === newPassword) {
    errors['newPassword'] = '与原始密码相同,请修改';
    return;
  }

  const result = await updateCurrentLoginPassword(oldPassword, oldPassword);
  if(result.code === ResultEnums.SUCCESS ){
    const flag = result.data;
    if(flag){
      Storage.clear()
      router.push({ path: '/login'});
    }else{
      alertInfo.alert = true;
      alertInfo.title = '密码修改失败提示'
      alertInfo.level = 1
      alertInfo.content = '密码修改失败,请稍后重试'
    }
  }else {
    alertInfo.alert = true;
    alertInfo.title = '密码修改失败提示'
    alertInfo.level = 1
    alertInfo.content = result.message
  }
}
async function resetErrors(){
  Object.keys(errors).forEach(key => {
    delete errors[key]
  })
}
</script>

<template>
  <div class="app-content pt-3 p-md-3 p-lg-4">
    <div class="container-xl">
      <div class="col-auto" v-if="proxy.$route.meta">
        <h1 class="app-page-title">{{ proxy.$route.meta.theme }}</h1>
      </div>
      <div class="row gy-4">
        <div class="col-12 col-lg-6">
          <div class="app-card app-card-account shadow-sm d-flex flex-column align-items-start">
            <div class="app-card-header p-3 border-bottom-0">
              <div class="row align-items-center gx-3">
                <div class="col-auto">
                  <div class="app-icon-holder">
                    <i class="bi bi-shield-check"></i>
                  </div><!--//icon-holder-->
                </div><!--//col-->
                <div class="col-auto">
                  <h4 class="app-card-title">密码重置</h4>
                </div><!--//col-->
              </div><!--//row-->
            </div><!--//app-card-header-->
            <div class="app-card-body px-4 w-100">
              <div class="item border-bottom py-3">
                <div class="row justify-content-between align-items-center">
                  <div class="col-auto">
                    <div class="item-label"><strong>原始密码</strong></div>
                    <div class="item-data">
                      <input id="signin-password" type="password" class="form-control border-0" v-model="password.oldPassword"
                             :class="(errors.hasOwnProperty('oldPassword')) && 'is-invalid'"   aria-describedby="oldPassword"  required="required">
                      <div id="oldPassword" class="invalid-feedback" v-if="(errors.hasOwnProperty('oldPassword'))">{{errors['oldPassword']}}</div>
                    </div>
                  </div><!--//col-->
                </div><!--//row-->
              </div><!--//item-->
              <div class="item border-bottom py-3">
                <div class="row justify-content-between align-items-center">
                  <div class="col-auto">
                    <div class="item-label"><strong>新密码</strong></div>
                    <div class="item-data">
                      <input id="signin-password" type="password" class="form-control border-0" v-model="password.newPassword"
                             :class="(errors.hasOwnProperty('newPassword')) && 'is-invalid'"   aria-describedby="newPassword" required="required">
                      <div id="newPassword" class="invalid-feedback" v-if="(errors.hasOwnProperty('newPassword'))">{{errors['newPassword']}}</div>
                    </div>
                  </div><!--//col-->
                </div><!--//row-->
              </div><!--//item-->
              <div class="item border-bottom py-3">
                <div class="row justify-content-between align-items-center">
                  <div class="col-auto">
                    <div class="item-label"><strong>再次确认密码</strong></div>
                    <div class="item-data">
                      <input id="signin-password" type="password" class="form-control border-0" v-model="password.affirmPassword"
                             :class="(errors.hasOwnProperty('affirmPassword')) && 'is-invalid'"   aria-describedby="affirmPassword" required="required">
                      <div id="affirmPassword" class="invalid-feedback" v-if="(errors.hasOwnProperty('affirmPassword'))">{{errors['affirmPassword']}}</div>
                    </div>
                  </div><!--//col-->
                </div><!--//row-->
              </div><!--//item-->
              <div class="item py-3" v-if="alertInfo.alert">
                <Alert :level="alertInfo.level" :title="alertInfo.title" :content="alertInfo.content" v-model="alertInfo.alert"></Alert>
              </div><!--//item-->
            </div><!--//app-card-body-->

            <div class="app-card-footer p-4 mt-auto">
              <a class="btn app-btn-secondary" href="#" @click="confirmUpdatePassword">确认提交</a>
            </div><!--//app-card-footer-->

          </div><!--//app-card-->
        </div>
      </div><!--//row-->

    </div><!--//container-fluid-->
  </div><!--//app-content-->
</template>

<style scoped>
</style>